import React, { FC, useEffect, useState } from "react";
//引入样式
import styles from "./houeslist.less";
//引入登录态
import { getCookie } from "@/utils/auth";
import { observer } from 'mobx-react-lite';
import useStore from "@/context/useStore";
import { Switch } from "antd"
//引入类型
import { HouseList, HouseBody } from "@/utils/houselist";
const Houselist: FC<HouseBody> = () => {
  //mobox
  const { Houselist } = useStore();
  //获取数据
  useEffect(() => {
    Houselist.getHouselist(getCookie());
  }, []);
  function changeFlag(id: any, disabled: boolean) {
    let params = {
      id,
      disabled,
    };
    Houselist.isDisabled(params).then(ok => {
      if (ok.status == 200) {
        alert(ok.description)
      } else {
        alert(ok.description)
      }
    })
  };
  return <div className={styles.box}>
    <div className={styles.house}>
      {
        Houselist.houselist.map((item, index) => {
          return <dl key={index} className={item.disabled ? 'active' : ''}>
            <dt><img src={`http://157.122.54.189:9060${item.houseImg}`} /></dt>
            <dd>
              <p>{item.title}</p>
              <p>{item.desc}</p>
              <p>
                {
                  item.tags.map((item, index) => {
                    return <span key={index}>{item}</span>
                  })
                }
              </p>
            </dd>
            <p>{item.price}/月<Switch defaultChecked={item.disabled} checkedChildren="上架" unCheckedChildren="下架"
              onChange={() => changeFlag(item.houseCode, item.disabled)}
            /></p>
          </dl>
        })
      }
    </div>
  </div>
};
export default observer(Houselist);
